<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
    <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <meta HTTP-EQUIV="expires" CONTENT="0">
    <link rel="shortcut icon" href="./images/icon.png" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>东明家居集团-市场信息管理系统</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/iview.css">
<link rel="stylesheet" href="css/style.css">
<link href="./js/toastr/toastr.css" rel="stylesheet">
<style>
    .label_name{width: 120px;}
    .pro_imgcon{width: 200px;overflow: hidden;float: left;margin: 10px 15px;}
    .pro_img{width: 100%;}
    .pro_img img{border-radius: 3px;height: 135px;}
    .pro_imginfo{width: 100%;float: left;line-height: 30px;font-size:14px;text-align: center;height: 25px;overflow:hidden;text-overflow:ellipsis;
        white-space:nowrap;color:#333;}
    .modalcon,.modalcon1{ width: 100%; height: 32px; line-height: 1.5;font-size: 13px;display: inline-block; padding: 4px 7px;}
    .ivu-form-item{margin-bottom: 0px}
    .modalcon1{height: auto}
</style>
</head>
<body>
<div class="container-fluid" id="app">
     <!-- breadcrumb -->
      <template class="page-header">
          <breadcrumb class="pull-left">
              <breadcrumb-item to="welcome.html" >首页</breadcrumb-item>
              <breadcrumb-item>图片浏览</breadcrumb-item>
          </breadcrumb>
      </template>
      <!-- 搜索条件 -->
      <div class="table-margin">
          <row>
              <i-col span="3" class-name="mr10" style="width:150px;">
                  <i-select v-model="Type" placeholder="品类" >
                      <i-option v-for="item in TypeList" :value="item.value" >{{item.label}}</i-option>
                  </i-select>
              </i-col>
              <i-col span="3" class-name="mr10" style="width:150px;" >
                  <i-select v-model="Style" placeholder="风格">
                      <i-option v-for="item in StyleList" :value="item.value"  >{{item.label}}</i-option>
                  </i-select>
              </i-col>
              <i-button type="primary" class="mr10" @click="querytable">搜索</i-button>
          </row>
      </div>

    <div class="table-margin">
        <a class="pro_imgcon" v-for="item in imageList" >
            <div class="pro_img"><img  :src="item.IUrl" width="200" @click="OpenProinfo(item.PName,item.Type,item.Style,item.Province,item.FName,item.IUrl)"></div>
            <div class="pro_imginfo">{{item.PName}}</div>
        </a>
        <modal v-model="Proinfo" title="产品详细信息" @on-ok="ok" @on-cancel="cancel" width='700'>
            <i-form  label-position="right" :label-width="80">
                    <row>
                        <i-col>
                            <Form-item label="产品名称：" >
                                <div class="modalcon">{{image.PName}}</div>
                            </Form-item>
                        </i-col>
                    </row>
                    <row>
                        <i-col span="12">
                            <Form-item label="产品品类：" >
                                <div class="modalcon">{{image.Type}}</div>
                            </Form-item>
                        </i-col>
                        <i-col span="12">
                            <Form-item label="产品风格：" >
                                <div class="modalcon">{{image.Style}}</div>
                            </Form-item>
                        </i-col>
                    </row>
                    <row>
                        <i-col span="12">
                            <Form-item label="产品产地：" >
                                <div class="modalcon">{{image.Province}}</div>
                            </Form-item>
                        </i-col>
                        <i-col span="12">
                            <Form-item label="产品厂家：" >
                                <div class="modalcon">{{image.FName}}</div>
                            </Form-item>
                        </i-col>
                    </row>
                    <row>
                        <i-col>
                            <Form-item label="产品图片：" >
                                <div class="modalcon1"><img v-bind:src="image.IUrl" width="500"></div>
                            </Form-item>
                        </i-col>
                    </row>
            </i-form>
        </modal>
    </div>

</div>
</body>
<script src="./js/jquery-1.11.1.min.js"></script>
<script src="./js/vue.js"></script>
<script src="./js/iview.min.js"></script>
<script src="./js/img/img_look.js"></script>
<script src="./js/toastr/toastr.min.js"></script>
</html>

  

  

  

  

  
